<script setup>
import { Toast } from "bootstrap";
import {onMounted, ref} from "vue";
import {host_custom} from "@/host.js";
import {toLocalDate} from "../utils/toLocalDate.js";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import axios from "axios";
import { userStore } from "@/stores/userStore.js";
import { useFriendStore} from "@/stores/friendStore.js";
import {storeToRefs} from "pinia";
import { friendService } from "@/service/friendService.js";

const { friendList } = storeToRefs(useFriendStore())
const { addFriend } = useFriendStore()


const toastElement = ref()
const toastInstance = ref()

const props = defineProps({
  sender_info: {
    type: Object
  }
})

const toast_show = () => {
  toastInstance.value.show()
}
const toast_hide = () => {
  toastInstance.value.hide()
}

const accept = () => {
  friendService().acceptRequestAndSync(props.sender_info)
  toast_hide()
}

defineExpose({
  toast_show,
  toast_hide
})

onMounted(() => {
  toastInstance.value = new Toast(toastElement.value)
})
</script>

<template>
  <teleport to="body">
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div ref="toastElement" id="toast_friendRequest" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img :src="host_custom+'/pfp/'+props.sender_info.sender_avatar" width="30" height="30" class="rounded-circle me-2" alt="avatar">
          <strong class="me-auto">{{ props.sender_info.sender_name }}</strong>
          <small>{{ toLocalDate(props.sender_info.send_time) }}</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body d-flex justify-content-between align-items-center">
          <span>
            请求添加您为好友
          </span>

          <div>
            <button @click="accept" class="btn btn-sm btn-outline-success me-1">接受 <font-awesome-icon :icon="['fas', 'check']" /></button>
            <button @click="toast_hide" class="btn btn-sm btn-outline-danger">忽略 <font-awesome-icon :icon="['fas', 'xmark']" /></button>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<style scoped>

</style>